<template>
  <div class="pro-form-modal">
    <CardItem tabName="服务状态" :hasHistory="false" :hasReal="false">
      <template #real>
        <Row class="card-item-box">
          <Col :span="12">
            <div>单位名称</div>
            <div>{{ formData.siteName }}</div>
          </Col>
          <Col :span="12">
            <div>现场联系人</div>
            <div>{{ formData.siteContact }}</div>
          </Col>
          <Col :span="12">
            <div>现场联系电话</div>
            <div>{{ formData.sitePhone }}</div>
          </Col>
        </Row>
      </template>
    </CardItem>
    <CardItem tabName="安装员信息" :hasHistory="false" :hasReal="false">
      <template #real>
        <Row class="card-item-box">
          <Col :span="12">
            <div>技术人员</div>
            <div class="info-text">{{ formData.userName }}</div>
          </Col>
          <Col :span="12">
            <div>技术人员电话</div>
            <div class="info-text">{{ formData.userPhone }}</div>
          </Col>
        </Row>
      </template>
    </CardItem>
    <CardItem tabName="安装设备信息" :hasHistory="false" :hasReal="false">
      <template #real>
        <Row class="card-item-box">
          <Col :span="6">
            <span>用户单位全称情景照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail1" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(1)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>开箱前照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail2" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(2)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>开箱后照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail3" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(3)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>设备铭牌和物联网卡照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail4" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(4)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>安装中照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail5" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(5)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>安装调试后设备近照</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail6" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(6)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>安装调试后设备远照</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail7" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(7)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6" v-if="formData.isInstallHorn == '1'">
            <span>喇叭1安装照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail8" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(8)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6" v-if="formData.isInstallHorn == '1'">
            <span>喇叭2安装照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail9" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(9)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
          <Col :span="6">
            <span>安装验收表照片</span>
            <div class="img-box">
              <img class="thumbnail-img" :src="thumbnail10" alt="" />
              <span class="img-actions">
                <span class="img-preview" @click="handlePictureCardPreview(10)">
                  <ZoomInOutlined />
                </span>
              </span>
            </div>
          </Col>
        </Row>
      </template>
    </CardItem>
    <Modal
      title="物联网卡详情"
      v-model:open="visibleImg"
      width="30%"
      :mask-closable="false"
      :keyboard="false"
      :footer="null"
      centered
      destroy-on-close
    >
      <div class="card-container">
        <img width="100%" :src="imageUrl" alt="" />
      </div>
    </Modal>
  </div>
</template>
<script setup lang="tsx">
import { computed, ref } from 'vue';
import { ZoomInOutlined } from '@ant-design/icons-vue';
import { Col, Modal, Row } from 'ant-design-vue';
import CardItem from '../comm/CardItem.vue';

interface Props {
  pageData: any;
  realTimeData: any;
  formData: any;
}
const props = defineProps<Props>();

const visibleImg = ref<boolean>(false);
const imageUrl = ref<string>('');
const thumbnail1 = computed(() => props.formData.thumbnail1);
const thumbnail2 = computed(() => props.formData.thumbnail2);
const thumbnail3 = computed(() => props.formData.thumbnail3);
const thumbnail4 = computed(() => props.formData.thumbnail4);
const thumbnail5 = computed(() => props.formData.thumbnail5);
const thumbnail6 = computed(() => props.formData.thumbnail6);
const thumbnail7 = computed(() => props.formData.thumbnail7);
const thumbnail8 = computed(() => props.formData.thumbnail8);
const thumbnail9 = computed(() => props.formData.thumbnail9);
const thumbnail10 = computed(() => props.formData.thumbnail10);
const handlePictureCardPreview = (file: number) => {
  visibleImg.value = true;
  const name = 'picture' + file + 'HdfsName';
  const host = window.location.host.replace(/^wdm/, 'ers');
  imageUrl.value = `${window.location.protocol == 'https:' ? 'https' : 'http'}://${host}/uploadPath${decodeURIComponent(props.formData?.[name])}`;
  console.log(imageUrl.value, 'imageUrl');
};
</script>
<style lang="scss" scoped>
.info-text {
  margin-left: 20px;
  color: #ddd;
}
.img-box {
  position: relative;
  width: 150px;
  height: 200px;
  margin-top: 10px;

  .thumbnail-img {
    width: 100%;
    height: 100%;
  }

  .img-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
    text-align: center;
    color: #fff;
    font-size: 20px;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    line-height: 200px;

    .img-preview {
      display: inline-block;
    }

    &:hover {
      opacity: 1;
      cursor: pointer;
    }
  }
}
.card-item-box {
  border-radius: 6px;
  color: var(--custom-sever-info);

  .ant-col div {
    margin: 12px 0;

    &:nth-child(2) {
      color: var(--text-color);
    }
  }
}
</style>
